<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>职位</title>
	<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../css/position.css">
</head>
<body>
	<div class="continer-fluid">
		<!-- 头部 -->
		<header></header>
		<!-- 开发说明 -->
		<div class="row row1">
			<div class="alert alert-success col-md-8 col-md-offset-2 text-center" role="alert">使用NodeJS + Express + MongoDB 完成的职位管理系统</div>
		</div>
		<!-- 导航 -->
		<div class="row row2">
			<div class="col-md-1 col-md-offset-1 col-sm-2 col-sm-offset-1 col-xs-2 col-xs-offset-1 text-primary">职位管理</div>
			<div class="col-md-1 col-md-offset-8 col-sm-1 col-sm-offset-7 col-xs-1 col-xs-offset-7 text-right"><button class="btn btn-primary" data-toggle="modal" data-target="#ModalPosition">添加</button></div>
		</div>
		<!-- 职位表格表头 -->
		<div class="row row3">
			<div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">
				<table class="table table-bordered">
					<tr>
						<th class="text-center">序号</td>
						<th class="text-center">公司logo</td>
						<th class="text-center">职位名称</td>
						<th class="text-center">公司名称</td>
						<th class="text-center">工作经验</td>
						<th class="text-center">职位类型</td>
						<th class="text-center">工作地点</td>
						<th class="text-center">职位薪资</td>
						<th class="text-center">操作</td>
					</tr>
					<tbody id="tbody"></tbody>
				</table>
				<!-- 分页模块 -->
				<nav aria-label="Page navigation" class="text-right">
					<ul class="pagination">
					    <li>
					      <a href="#" aria-label="Previous">
					        <span aria-hidden="true">&laquo;</span>
					      </a>
					    </li>
					    <li class="active"><a href="#">1</a></li>
					    <li><a href="#">2</a></li>
					    <li><a href="#">3</a></li>
					    <li><a href="#">4</a></li>
					    <li><a href="#">5</a></li>
					    <li>
					      <a href="#" aria-label="Next">
					        <span aria-hidden="true">&raquo;</span>
					      </a>
					    </li>
					</ul>
				</nav>
			</div>
		</div>
		<!-- 职位修改模态框 -->
		<div class="modal fade" id="editPosition" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="myModalLabel">修改职位</h4>
						</div>
						<div class="modal-body">
						<div class="alert alert-success hidden edit-succ text-center" role="alert">修改成功！</div>
							<div class="modal-body">
								<form class="editform">
									<div class="form-group">
										<label for="recipient-name" class="control-label">公司logo:</label>
										<input type="file" name="logo" class="form-control" id="logo">
										<input type="hidden" name="_id" class="form-control" id="_id">
									</div>
									<div class="form-group">
										<label for="message-text" class="control-label">职位名称:</label>
										<input type="text" name="position" class="form-control" placeholder="请输入职位名" id="position"></input>
									</div>
									<div class="form-group">
										<label for="message-text" class="control-label">公司名称:</label>
										<input type="text"  name="company" class="form-control" placeholder="请输入公司名称验" id="company"></input>
									</div>
									<div class="form-group">
										<label for="message-text" class="control-label">工作经验:</label>
										<input type="text"  name="exprience" class="form-control" placeholder="请输入工作经验" id="exprience"></input>
									</div>
									<div class="form-group">
										<label for="message-text" class="control-label">职位类型</label>
										<input type="text"  name="type" class="form-control" placeholder="请输入职位名称" id="type"></input>
									</div>
									<div class="form-group">
										<label for="message-text" class="control-label">工作地点:</label>
										<input type="text"  name="address" class="form-control" placeholder="请输入工作地点" id="address"></input>
									</div>
									<div class="form-group">
										<label for="message-text" class="control-label">岗位薪资</label>
										<input type="text"  name="salary" class="form-control" placeholder="请输入岗位薪资" id="salary"></input>
									</div>
								</form>
							</div>
						</div>
						<div class="modal-footer">
						    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary btn-bc">保存</button>
						</div>
					</div>
				</div>
			</div>
	</div>
	<!-- 实际职位渲染模块 -->
	<script type="text/html" id="list-template">
		{{each position item i}}
			<tr>
				<td class="text-center">{{i+1}}</td>
				<td class="text-center _id" style="display: none;">{{item._id}}</td>
				<td class="text-center logo"><img src="{{item.logo}}"/></td>
				<td class="text-center position">{{item.position}}</td>
				<td class="text-center company">{{item.company}}</td>
				<td class="text-center exprience">{{item.exprience}}</td>
				<td class="text-center type">{{item.type}}</td>
				<td class="text-center address">{{item.address}}</td>
				<td class="text-center salary">{{item.salary}}</td>
				<td class="text-primary"><span class="editBtn" data-toggle="modal" data-target="#editPosition">修改</span>  <span class="delBtn">删除</span></td>
			</tr>
		{{/each}}
	</script>	
	<script type="text/javascript" src="/lib/requirejs/require.js" data-main="/js/position/index.js"></script>
</body>
</html>